<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="400px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>我的详情</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="1-1" @click="updflag(0)">我的</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>商品详情</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="1-1" @click="updflag(1)">列表</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>活动详情</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="1-1" @click="updflag(2)">秒杀活动</el-menu-item>
                    <el-menu-item index="1-1" @click="updflag(3)">砍价活动</el-menu-item>
                    <el-menu-item index="1-1" @click="updflag(4)">直播活动</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <div v-if="flag==0">
            <h1>
              昵称：<el-input v-model="user.nickname" placeholder="请输入内容" disabled style="width: 250px;"></el-input><br>
              头像：<img :src="user.head" alt="" width="250px" height="300px"><br>
              注册时间：<el-input v-model="user.registerDate" placeholder="请输入内容" disabled style="width: 250px;"></el-input>
              <br>
              上次登陆时间：<el-input v-model="user.lastLoginDate" placeholder="请输入内容" disabled style="width: 250px;">
              </el-input><br>
              登录次数：<el-input v-model="user.loginCount" placeholder="请输入内容" disabled style="width: 250px;"></el-input>
              <br>
            </h1>
          </div>
          <div v-if="flag==1">
            <div class="mod-config">
              <el-form :inline="true" :model="goods" @keyup.enter.native="getDataList()">
                <el-form-item>
                  <el-input v-model="goods.key" placeholder="参数名" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="getDataList()">查询</el-button>
                  <!--<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
                  <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除
                  </el-button> -->
                </el-form-item>
              </el-form>
              <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                style="width: 100%;">
                <el-table-column type="selection" header-align="center" align="center" width="50">
                </el-table-column>
                <el-table-column prop="id" header-align="center" align="center" label="商品id">
                </el-table-column>
                <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
                </el-table-column>
                <el-table-column prop="goodsTitle" header-align="center" align="center" label="商品标题">
                </el-table-column>
                <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片">
                </el-table-column>
                <el-table-column prop="goodsDetail" header-align="center" align="center" label="商品详细介绍">
                </el-table-column>
                <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品单价">
                </el-table-column>
                <el-table-column prop="goodsStock" header-align="center" align="center" label="商品库存，-1表示没有限制">
                </el-table-column>
                <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
              </el-pagination>
              <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                  label-width="80px">
                  <el-form-item label="商品名称" prop="goodsName">
                    <el-input v-model="dataForm.goodsName" placeholder="商品名称"></el-input>
                  </el-form-item>
                  <el-form-item label="商品标题" prop="goodsTitle">
                    <el-input v-model="dataForm.goodsTitle" placeholder="商品标题"></el-input>
                  </el-form-item>
                  <el-form-item label="商品图片" prop="goodsImg">
                    <el-input v-model="dataForm.goodsImg" placeholder="商品图片"></el-input>
                  </el-form-item>
                  <el-form-item label="商品详细介绍" prop="goodsDetail">
                    <el-input v-model="dataForm.goodsDetail" placeholder="商品详细介绍"></el-input>
                  </el-form-item>
                  <el-form-item label="商品单价" prop="goodsPrice">
                    <el-input v-model="dataForm.goodsPrice" placeholder="商品单价"></el-input>
                  </el-form-item>
                  <el-form-item label="商品库存，-1表示没有限制" prop="goodsStock">
                    <el-input v-model="dataForm.goodsStock" placeholder="商品库存，-1表示没有限制"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="visible = false">取消</el-button>
                  <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
                </span>
              </el-dialog>
            </div>
            <div v-if="flag==2">

            </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          visible: false,
          dataForm: {
            id: 0,
            goodsName: '',
            goodsTitle: '',
            goodsImg: '',
            goodsDetail: '',
            goodsPrice: '',
            goodsStock: ''
          },
          dataRule: {
            goodsName: [
              { required: true, message: '商品名称不能为空', trigger: 'blur' }
            ],
            goodsTitle: [
              { required: true, message: '商品标题不能为空', trigger: 'blur' }
            ],
            goodsImg: [
              { required: true, message: '商品图片不能为空', trigger: 'blur' }
            ],
            goodsDetail: [
              { required: true, message: '商品详细介绍不能为空', trigger: 'blur' }
            ],
            goodsPrice: [
              { required: true, message: '商品单价不能为空', trigger: 'blur' }
            ],
            goodsStock: [
              { required: true, message: '商品库存，-1表示没有限制不能为空', trigger: 'blur' }
            ]
          },
          goods: {
            key: ''
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false,
          flag: '',
          baseUrl: 'http://localhost:8888/api',
          token: null,
          activeIndex: '1',
          activeIndex2: '1',
          user: {
            nickname: '',
            head: '',
            registerDate: '',
            lastLoginDate: '',
            loginCount: ''
          }
        }
      },
      watch: {

      },
      created () {
        this.token = localStorage.getItem("token")
        if (this.token == null) {
          alert("无权访问")
          location = "./login.html"
        }
        console.log(this.token);
        this.getUser();
        this.getDataList();
      },
      //方法集合
      methods: {
        // 表单提交
        dataFormSubmit () {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              axios({
                url: `${this.baseUrl}/goods/goods/${!this.dataForm.id ? 'save' : 'update'}`,
                method: 'post',
                data: {
                  'id': this.dataForm.id || undefined,
                  'goodsName': this.dataForm.goodsName,
                  'goodsTitle': this.dataForm.goodsTitle,
                  'goodsImg': this.dataForm.goodsImg,
                  'goodsDetail': this.dataForm.goodsDetail,
                  'goodsPrice': this.dataForm.goodsPrice,
                  'goodsStock': this.dataForm.goodsStock
                },
                headers: {
                  token: this.token
                }
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                  this.getDataList();
                } else {
                  this.$message.error(data.msg)
                }
              })
            }
          })
        },
        init (id) {
          this.dataForm.id = id || 0
          this.visible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
            if (this.dataForm.id) {
              axios({
                url: `${this.baseUrl}/goods/goods/info/${this.dataForm.id}`,
                method: 'get',
                headers: {
                  token: this.token
                }
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.dataForm.goodsName = data.goods.goodsName
                  this.dataForm.goodsTitle = data.goods.goodsTitle
                  this.dataForm.goodsImg = data.goods.goodsImg
                  this.dataForm.goodsDetail = data.goods.goodsDetail
                  this.dataForm.goodsPrice = data.goods.goodsPrice
                  this.dataForm.goodsStock = data.goods.goodsStock
                }
              })
            }
          })
        },
        // 获取数据列表
        getDataList () {
          this.dataListLoading = true
          axios({
            url: `${this.baseUrl}/goods/goods/list`,
            method: 'get',
            params: {
              'page': this.pageIndex,
              'limit': this.pageSize,
              'key': this.goods.key
            },
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list
              this.totalPage = data.page.totalCount
            } else {
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
        },
        // 每页数
        sizeChangeHandle (val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle (val) {
          this.pageIndex = val
          this.getDataList()
        },
        // 多选
        selectionChangeHandle (val) {
          this.dataListSelections = val
        },
        // 新增 / 修改
        addOrUpdateHandle (id) {
          this.dataForm = {
            id: 0,
            goodsName: '',
            goodsTitle: '',
            goodsImg: '',
            goodsDetail: '',
            goodsPrice: '',
            goodsStock: ''
          }
          this.visible = true
          if (id != null) {
            this.init(id);
          }

        },
        // 删除
        deleteHandle (id) {
          var ids = id ? [id] : this.dataListSelections.map(item => {
            return item.id
          })
          this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios({
              url: `${this.baseUrl}/goods/goods/delete`,
              method: 'post',
              data: ids,
              headers: {
                token: this.token
              }
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          })
        },
        getUser () {
          axios.get(`${this.baseUrl}/user/user/info`, {
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data.code == 0) {
              localStorage.setItem("userId", data.user.id)
              this.user.nickname = data.user.nickname
              this.user.head = data.user.head
              this.user.registerDate = data.user.registerDate
              this.user.lastLoginDate = data.user.lastLoginDate
              this.user.loginCount = data.user.loginCount
            } else {
              console.log("token错误");
            }
          })
        },
        updflag (key) {
          this.flag = key
          if (this.flag == 2) {
            location = "./activity.html"
          }
          if (this.flag == 3) {
            location = "./bargainActivity.html"
          }
          if (this.flag == 4) {
            location = "./liveList.html"
          }
        },
        handleSelect (key, keyPath) {
          console.log(key, keyPath);
        },
        handleOpen (key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose (key, keyPath) {
          console.log(key, keyPath);
        }
      },
    })
  </script>
</body>

</html>